<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="机构管理">
<style>
    .form-horizontal .controls {
           line-height: 40px;
           height: 40px;
       }

</style>
<form id="searchForm" class="form-panel" action="${basepath}/manage/organize/loadOfflineData">
    <ul class="panel-content">
        <li>
            <a onclick="javascript:history.go(-1);" style="float: left;">返回上一级</a>

            <div class="control-group span5" style="margin-left: 20px;">
                <div class="search-controls  controls">
                    <input type="text" name="name" id="title" value="" placeholder="搜索活动名称、联系人">
                </div>
            </div>
            <div class="form-actions span2" style="margin-left: 15px;">
                <button type="submit" class="button  button-primary">
                    搜索
                </button>
            </div>
        </li>
    </ul>
</form>

<div id="grid"></div>
<script>
    /*-------------------------------------------------------- 表格数据渲染start-----------------------------------*/
    var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                {title: '序号', dataIndex: 'id', elCls: 'center',width:'10%'},
                {title: '活动名称', dataIndex: 'name', elCls: 'center',width:'15%'},
                {title: '机构名称', dataIndex: 'organizeName', elCls: 'center',width:'15%'},
                {title: '联系人', dataIndex: 'principal', elCls: 'center',width:'15%'},
                {title: '参加人数', dataIndex: 'accountNum',elCls: 'center',width:'15%'},
                {
                    title: '活动状态', dataIndex: 'status',elCls: 'center',width:'15%', renderer: function (data) {
                    if (data == "1") {
                        return '未开始';
                    }
                    if (data == "2") {
                        return '进行中';
                    } else {
                        return '已结束';
                    }
                }
                },
                {
                    title: '操作', elCls: 'center',width:'15%', dataIndex: 'id', renderer: function (value) {
                    return '<a style="margin-left:10px;"  href="${basepath}/manage/organize/toOfflineEdit?id=' + value + '">查看</a> '
                }
                }
            ];
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    var id = getQueryString("id");
    var store = new Store({
                url: 'loadOfflineData',
                autoLoad: true, //自动加载数据
                params: { //配置初始请求的参数
                    length: '10',
                    organizeID: id
                },
                pageSize: 10,	// 配置分页数目
                root: 'list',
                totalProperty: 'total'

            }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                store: store,
                plugins: [Grid.Plugins.CheckSelection], // 插件形式引入多选表格

                // 底部工具栏
                bbar: {
                    pagingBar: true
                }
            });
    grid.render();
    var form = new BUI.Form.HForm({
         srcNode: '#searchForm'
     }).render();

     form.on('beforesubmit', function (ev) {
         //序列化成对象
         var obj = form.serializeToObject();
         obj.start = 0; //返回第一页
         store.load(obj);
         return false;
     });
    /*---------------------------------------------------表格数据渲染 end-------------------------------------------*/
</script>

</@page.pageBase>